<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				width: 500px;
				height: 400px;
			}
			.bottom{
				display: flex;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top">
				<img src="./images/03.jpg"/>
			</div>
			<div class="bottom">
				<button id="pre">上一个</button>
				<button id="next">下一个</button>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		
		var arr=["./images/01.jpg","./images/02.jpg","./images/03.jpg"]
		var pre=document.querySelector("#pre")
		var next=document.querySelector("#next");
		var img =document.querySelector("img");

		var i=0;
		//点击下一个，切换图片
		next.onclick=function(){
			i++;
			if(i>2){
				i=2;
			}
			img.src=arr[i]
	
		}
		
		//点击上一个，切换图片
		pre.onclick=function(){
			i--
			if(i<0){
				i=0;
			}
			img.src=arr[i]
		}
		
	</script>
</html>
